<template>
    <div>
        <!-- parentDepth:每一层父级都记录深度（即当前多少层），所以每一层减1 -->
        <ParentComment :commentData="commentData.parent" v-if="commentData.parent"
        :parentDepth="parentDepth" @parentCallReply="diguiCallReply"></ParentComment>
        <div class="parent-comment">
        <div class="row">
            <div class="info">
                <div class="user">
                    <img v-if="commentData.user.head_img" :src="commentData.user.head_img  | fixImgUrl" alt="">
                    <img v-else src="../../assets/logo.png" alt="">
                </div>
                <div class="other">
                    <span class="author">{{commentData.user.nickname}}</span>
                    <span class="date">{{commentData.create_date ? commentData.create_date.split('T')[0]:''}}</span>
                </div>
            </div>
            <!-- 递归的每一个父级都是这里的代码，点击回复时通过parentCallReply事件触发ParentComment组件（是父级的同时也是子级）上的parentCallReply事件将本层数据传出到上一级 -->
            <div class="reply" @click="parentCallReply">回复</div>
        </div>
        <div class="centent">{{commentData.content}}</div>
     </div>
    </div>
</template>

<script>
export default {
    // 固定写法呀, 本来父子组件是需要 import 和注册的, 但是这里的子组件就是自己, 那不能自己引入自己自己注册自己呀, 那渲染标签怎么写呢? 就是靠声明当前组件的 name 来作为标签
    name:'ParentComment',//声明当前组件的 name 来作为标签来使用
    props:['commentData','parentDepth'],
    methods:{
        parentCallReply(){
            // 每一层都有触发自定义事件parentCallReply
            // 并将父级本层id和昵称传出留作他用
            this.$emit('parentCallReply',{
                id:this.commentData.id,
                nickname:this.commentData.user.nickname
            })
        },
        // 因为是递归父级，所以在当前父级的上一级就要使用parentCallReply事件
        diguiCallReply(parentInfo){
            this.$emit('parentCallReply',parentInfo)
        }
    }
}
</script>

<style lang="less" scoped>
.parent-comment{
    padding:4.444vw 3.889vw 5.556vw 3.889vw;
    border:1px solid #D7D7D7;
    border-bottom: 0;
    .row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .user{
                width: 9.722vw;
                height: 9.722vw;
                img{
                    width: 9.722vw;
                    height: 9.722vw;
                    border-radius: 50%;
                }
            }
            .other{
                margin-left: 2.222vw;
                .author{
                    font-size: 3.889vw;
                    color: #212121;
                }
                .date{
                    margin-left: 3.889vw;
                    font-size: 3.333vw;
                    color: #707070;
                }
            }
        }
        .reply{
            font-size: 3.333vw;
            color: #707070;
        }
    }
    .centent{
        padding-top: 5vw;
        font-size: 3.889vw;
        color: #212121;
    }
}
.add_border{
    border-bottom:1px solid #D7D7D7;
}
</style>